<template>
  <el-table>
    <el-table-column v-if="props.showSelection"
                     type="selection"
                     :selectable="selectable"
                     width="55" />
    <el-table-column v-for="(item, index) in  columns"
                     :key="index"
                     :type="item.type"
                     :prop="item.prop"
                     :label="item.label"
                     :width="item.width">
      <template #default="scope">
        <template v-if="hasSlot(item.prop + 'TR')">
          <slot :name="item.prop + 'TR'"
                :record="scope.row"></slot>
        </template>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
const props = defineProps({
  SearchDataList: {
    type: Array,
    default: () => []
  },
  max: {
    type: Number,
    default: 4
  },
  colSpan: {
    type: Number,
    default: 6
  },
  columns: {
    type: Array,
    required: true
  },
  // 是否显示多选框
  showSelection: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['reset', 'search'])
const slots = useSlots()
// 检查插槽是否存在
const hasSlot = name => {
  return !!slots[name]
}
const DISPLAY_MAX_ON_FOLDED = props.max
const colSpan = props.colSpan
const showSearchDataList = ref(props.SearchDataList)
const state = reactive({
  dataList: [], // 筛选框数据源，data一层处理，getConfigColumn二层处理增加options
  col: 3, // 列数
  isFolder: true, // 是否折叠状态
  showMax: DISPLAY_MAX_ON_FOLDED, // 显示的最大数量
  formState: {}
})

const toggleMoreFilter = () => {
  state.isFolder = !state.isFolder
  console.log(state.isFolder)
  if (!state.isFolder) {
    showSearchDataList.value = props.SearchDataList.slice(
      0,
      DISPLAY_MAX_ON_FOLDED
    )
  } else {
    showSearchDataList.value = props.SearchDataList
  }
}

onMounted(() => {
  // console.log('FormFilter mounted', $slots)
  toggleMoreFilter()
})
const { formState } = toRefs(state)
defineExpose({ formState })
</script>
<style lang="scss" scoped>
.ant-radio-wrapper {
  font-size: 12px;
}
</style>
